import React, { Component } from 'react'
import { StyleSheet, View, Image, Text, Touchable, Dimensions } from 'react-native'
import { connect } from 'react-redux'
import uuid from 'uuid'
import { SearchBar, Carousel } from 'antd-mobile'
import PropTypes from 'prop-types'
import Swiper from 'react-native-swiper'
import { NavigationActions } from '../utils'
import { THEME_BACKGROUND } from '../static/color'

const { width } = Dimensions.get('window')

const BANNER_IMGS = [
  require('../images/1.jpg'),
  require('../images/2.jpg'),
  require('../images/3.jpg'),
  require('../images/4.jpg')
];

const styles = StyleSheet.create({
  wrapper: {
  },
  img: {
    width,
    height: 200
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})
@connect()
class Search extends Component {
  state = {
    value: ''
  }
  onChange = (value) => {
    this.setState({ value });
  }
  clear = () => {
    this.setState({ value: '' });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <SearchBar
          value={this.state.value}
          placeholder="Search"
          maxLength={8}
          onClear={this.clear}
          onChange={this.onChange}
          onSubmit={value => console.log(value, 'onSubmit')}
        />
        <View style={{ height: 200 }}>
          <Swiper
            style={styles.wrapper}
            height={200}
            showsButtons={true}
            showsPagination={false}
            paginationStyle={{ bottom: 150 }}
            dot={<View
              style={{
              width: 8,
              height: 8,
              backgroundColor: 'white',
              borderRadius: 4,
              marginLeft: 3,
              marginRight: 3
              }}
            />}
            activeDot={<View style={{
              width: 8,
              height: 8,
              backgroundColor: 'orange',
              borderRadius: 4,
              marginLeft: 3,
              marginRight: 3
              }}
            />}
          >
            <View style={styles.slide1}>
              <Image source={require('../images/1.jpg')} style={styles.img} />
            </View>
            <View style={styles.slide1}>
              <Image source={require('../images/2.jpg')} style={styles.img} />
            </View>
            <View style={styles.slide1}>
              <Image source={require('../images/3.jpg')} style={styles.img} />
            </View>
          </Swiper>
        </View>
        <Text>111</Text>
      </View>
    )
  }
}

export default Search
